.keep-markdown-body {
  font-size 1rem

  blockquote {
    position relative
    display flex
    flex-direction column
    justify-content flex-start
    box-sizing border-box
    margin 1.4rem 0
    padding 0.8rem
    color var(--text-color-3)
    background var(--background-color-2)
    border-left 0.4rem solid var(--text-color-4)
    border-top-left-radius 0.2rem
    border-bottom-left-radius 0.2rem


    p
    ul
    ol
    footer {
      position relative
      box-sizing border-box
    }

    footer {
      margin-bottom 0.6rem
      font-style italic
    }

    cite {
      position relative
      box-sizing border-box
      margin-left 1rem
      color var(--text-color-4)

      &::before {
        content '— '
      }
    }
  }


  p {
    margin 0.6rem 0
    color var(--text-color-3)
    line-height 2
  }


  a {
    position relative
    box-sizing border-box
    padding-bottom 0.1rem
    text-decoration none
    overflow-wrap break-word
    border-bottom 0.1rem solid var(--text-color-4)
    outline 0
    cursor pointer


    .fas
    .far
    .fab {
      position relative
      margin 0 0.2rem 0 0.4rem
      color var(--text-color-4)
      font-size 0.8rem
    }


    &:hover {
      text-decoration underline

      &::after {
        background var(--primary-color)
      }
    }
  }


  strong {
    color var(--text-color-3)
  }


  em {
    color var(--text-color-3)
  }


  ul
  ol {
    li {
      margin 0.3rem 0 0.3rem 1rem
      line-height 2rem
    }
  }


  ul {

    li {
      list-style disc

      ul {

        li {
          list-style circle

          ul {
            li {
              list-style square
            }
          }
        }
      }
    }
  }


  ol {

    li {
      list-style decimal

      ol {

        li {
          list-style upper-alpha

          ol {
            li {
              list-style upper-roman
            }
          }
        }
      }
    }
  }


  li {
    color var(--text-color-3)
  }


  h1
  h2
  h3
  h4
  h5
  h6 {
    position relative
    box-sizing border-box
    padding-top 0.4rem
    padding-bottom 0.2rem
    overflow hidden
    color var(--text-color-2)
    line-height 1.5
    white-space nowrap
    text-overflow ellipsis
    border-bottom 1px solid var(--post-h-bottom-border-color)

    +keep-tablet() {
      line-height 1.25
    }

    &:hover {
      a.headerlink {
        visibility visible
      }
    }

    a.headerlink {
      position relative
      float right
      box-sizing border-box
      margin-left 0.32rem
      padding-top 0.25rem
      color var(--text-color-4)
      font-size 1.2rem
      text-decoration none
      border none
      visibility hidden


      &:hover {
        color var(--text-color-3)
      }

      &::before {
        font-weight 600
        font-family 'Font Awesome 6 Free'
        content '\f0c1'
      }
    }
  }


  h1 {
    font-weight 600
    font-size 1.8rem

    +keep-tablet() {
      font-size 1.7rem
    }
  }


  h2 {
    font-weight 600
    font-size 1.7rem

    +keep-tablet() {
      font-size 1.6rem
    }
  }


  h3 {
    font-weight 550
    font-size 1.6rem

    +keep-tablet() {
      font-size 1.5rem
    }
  }


  h4 {
    font-weight 550
    font-size 1.5rem

    +keep-tablet() {
      font-size 1.4rem
    }
  }


  h5 {
    font-weight 500
    font-size 1.28rem

    +keep-tablet() {
      font-size 1.18rem
    }
  }


  h6 {
    font-weight 500
    font-size 1.2rem
    line-height 1.2

    +keep-tablet() {
      font-size 1.1rem
      line-height 1.1
    }
  }


  img {
    position relative
    display block
    box-sizing border-box
    max-width 100%
    box-shadow 0 0 0.2rem var(--shadow-color)
    cursor zoom-in
    opacity 1

    &.hide {
      opacity 0
    }

    &[lazyload] {
      margin 0.8rem auto 0.2rem
      zoom 1 !important
    }
  }


  & > img
  p > img {
    margin var(--post-img-align)

    if (hexo-config('post') && hexo-config('post.img_align') == 'left') {
      margin 0 auto 0 0
    }

    if (hexo-config('post') && hexo-config('post.img_align') == 'center') {
      margin 0 auto
    }

    if (hexo-config('post') && hexo-config('post.img_align') == 'right') {
      margin 0 0 0 auto
    }
  }


  & > .table-container {
    box-sizing border-box
    width 100%
    margin 1.5rem 0
    overflow auto

    table {
      box-sizing border-box
      width 100%
      border-collapse collapse
      border-spacing 0

      +keep-mobile() {
        & {
          table-layout fixed
        }
      }


      td
      th {
        padding 0
      }


      td {
        color var(--text-color-3)
      }


      th {
        color var(--text-color-2)
        font-weight 600
      }


      td
      th {
        padding 0.5rem 1rem
        border 0.1rem solid var(--border-color)
      }


      tr {
        background-color var(--background-color-1)
        border 0.1rem solid var(--border-color)
      }

      tr:nth-child(2n) {
        background-color var(--background-color-2)
      }
    }
  }


  .mermaid {
    background #f5f5f5 !important
    border-radius 0.3rem
  }
}

